<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            事件的基本使用：
                1.使用v-on：xxx 或 @：xxx  绑定事件，其中xxx是事件名
                2.事件的回调需要配置在methods对象中，最终会在vm上
                3.methods中配置的函数，不要用箭头函数！！！！否则this就不是vm了
                4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或者  组件实例对象
                5.@click='demo' 和 @click='demo($event)'效果一致，但是后者可以传参
         -->
        <div id="root">
            <h1>欢迎来到{{country}}！！！</h1>
            <!-- <button v-on:click = "showInfo">点击提示信息</button> -->
            <!-- 简写 -->
            <button @click = "showInfo">点击提示信息</button>
            <button @click = "showInfo2($event,66)">点击提示信息2</button>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示

            const vm = new Vue({
                el:'#root',
                data:{
                    country:'中国'
                },
                methods: {
                    showInfo(event){
                        console.log(this === vm);//true   此处的this是vm
                        console.log(event.target.innerText);
                        alert('Hello World');
                    },
                    showInfo2(event,n){
                        console.log(event);
                        console.log(n)
                    }
                }
            })
        </script>
    </body>
</html>